<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="tiaoz()">添加</button>
		<table border="1">
			<thead>
				<tr>
					<th>书籍名称</th>
					<th>出版日期</th>
					<th>价格</th>
					<th>购买数量</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<script>
			let table=document.getElementsByTagName("table")[0];
			let tbody=document.getElementsByTagName("tbody")[0];
			let arrshuji=[
				{minzi:"《小程序从入门到放弃》",riqi:"2010-10",jiage:60.00},
			    {minzi:"《前端从入门到放弃》",riqi:"2002-07",jiage:460.00},
				{minzi:"《Java从入门到放弃》",riqi:"1999-04",jiage:360.00},
				{minzi:"《C++从入门到放弃》",riqi:"2012-01",jiage:260.00},
				{minzi:"《PHP从入门到放弃》",riqi:"2010-03",jiage:160.00}
				
			];
			let span1=document.getElementsByTagName("span")[0];
			let ti=1;
			update();
			
			function update(){
				if (JSON.parse(sessionStorage.getItem("arrshuji"))) {
					arrshuji=JSON.parse(sessionStorage.getItem("arrshuji"));
				}
			for(let index in arrshuji){
				let item=arrshuji[index];
				let tr=document.createElement("tr");
				tbody.appendChild(tr);
				let td=document.createElement("td");
				tr.appendChild(td);
				let text=item.minzi;
				td.innerHTML=`<a onclick="edit()"> ${text} </a>`;
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=item.riqi;
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=item.jiage;
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerHTML=`<Button onclick="jian(ti)">-</Button><span>1</span>
				<Button onclick="jia(ti)">+</Button>`;
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerHTML=`<Button>编辑</Button>
				               <Button onclick="del(${index})">删除</Button>  `;
			}
			}
			function clear(){
				tbody.remove();
				tbody=document.createElement("tbody");
				table.appendChild(tbody);
			}
			function del(index){
				if (JSON.parse(sessionStorage.getItem("arrshuji"))) {
					arrshuji=JSON.parse(sessionStorage.getItem("arrshuji"));
				}
					
				arrshuji.splice(index,1);
				window.sessionStorage.setItem("arrshuji",JSON.stringify(arrshuji));
				clear();
				update();
			}
			function edit(index){
				sessionStorage.setItem("item",JSON.stringify(arrshuji[index]));
				location.href='作业页面二.html';
			}
			function tiaoz(){
				window.sessionStorage.setItem("arrshuji",JSON.stringify(arrshuji));
				window.location.href='作业页面二.html';
				
			}
			function jia(ti){
				span1+=1;
			}
			function jian(ti){
				if(span1>0){
					span1-=1;
				}
			}
			
		</script>
	</body>
</html>
